<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function recipe_list(page) {
		location.href="${path}/recipe/recipe_list.do?page="+page+"&search_option=${map.search_option}&search=${map.search}";
	}
	
	function moveHome() {
		location.href="${path}/index.jsp";
	}
	
	function moveWrite() {
		if(${sessionScope.userid == null} ){
			location.href="${path}/member/login.jsp";
		}else{
			location.href="${path}/recipe/recipe_write.do";
		}
	}
</script>
</head>
<body>
<div id="TypeMenu" style="display: none; background-color: black;">
	<table align="center" style="text-align: center;">
		<tr>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=한식"><img alt="hansik.jpg" src="${path}/images/icons/hansik.jpg" width="150px;" height="100px"></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=중식"><img alt="joongsik.jpg" src="${path}/images/icons/joongsik.jpg" width="150px;" height="100px"></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=양식"><img alt="yangsik.jpg" src="${path}/images/icons/yangsik.jpg" width="150px;" height="100px"></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=일식"><img alt="ilsik.jpg" src="${path}/images/icons/ilsik.jpg" width="150px;" height="100px"></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=분식"><img alt="boonsik.jpg" src="${path}/images/icons/boonsik.jpg" width="150px;" height="100px"></a>
		<tr>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=한식"><b>한식</b></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=중식"><b>중식</b></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=양식"><b>양식</b></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=일식"><b>일식</b></a>
			<td><a href="${path}/recipe/recipe_list.do?search_option=type&search=분식"><b>분식</b></a>
		<tr>
			<td colspan="5"><input type="button" id="menu_recipe_close" value="메뉴닫기" style="padding: 5px; width: 800px; height: 30px;">
	</table>
</div>

<hr style="height: 5px; background-color: orange;">
<span style="font: 30px bold; margin-left: 30px;">§ Recipe_List §</span> &nbsp;&nbsp;
<span style="color: orange; font: 30px bold; margin-left: 10px;">${map.count }</span> EA
<div style="display:inline-block; margin-left: 50px;">
	<form action="${path}/recipe/recipe_list.do" method="post">
	<select name="search_option">
	<c:choose>
		<c:when test="${map.search_option == 'multi' }">
			<option value="multi" selected>전체
			<option value="userid">이름
			<option value="subject">제목
			<option value="history">내용
		</c:when>
		<c:when test="${map.search_option == 'userid' }">
			<option value="multi">전체
			<option value="userid" selected>이름
			<option value="subject">제목
			<option value="history">내용
		</c:when>
		<c:when test="${map.search_option == 'subject' }">
			<option value="multi">전체
			<option value="userid">이름
			<option value="subject" selected>제목
			<option value="history">내용
		</c:when>
		<c:when test="${map.search_option == 'history' }">
			<option value="multi">전체
			<option value="userid">이름
			<option value="subject">제목
			<option value="history" selected>내용
		</c:when>
		<c:otherwise>
			<option value="multi">전체
			<option value="userid">이름
			<option value="subject">제목
			<option value="history">내용
		</c:otherwise>
	</c:choose>
	</select>
	<input type="text" name="search" value="${map.search }">
	<input type="submit" value="조회">
</form>
</div>
<div style="background-color: orange; display: inline-block; vertical-align: middle; margin-left: 170px; padding-left: 10px; padding-right: 10px;">
<input type="image" id="btnHome" src="${path}/images/icons/btnHome.png" width="50px" height="50px" onclick="moveHome()">
<input type="image" id="btnWrite" src="${path}/images/icons/btnWrite.png" width="50px" height="50px" onclick="moveWrite()">
</div>
<hr style="height: 5px; background-color: orange;">
<table align="center">
<c:forEach var="row" items="${map.list }">
<tr>
	<td rowspan="2" width="200px" height="200px">
		<img alt="${row.image}" src="${path}/images/recipe/${row.idx}/${row.image}" width="200px" height="200px"/>
	<td colspan="2" style="padding-left: 20px; padding-right: 20px;">
		<b>
		<a href="${path}/recipe/recipe_detail.do?idx=${row.idx}"><b>${row.subject }</b></a><br>
		</b>
	<td rowspan="2" style="padding-left: 20px; padding-right: 20px;">
		<b>HIT: ${row.hit } <br>
		UserID: ${row.userid } / Lv. ${row.level }<br>
		DATE: ${row.post_date }
		</b>
<tr>
	<td style="padding-left: 20px; padding-right: 20px;">
		<b>
		Rating
			<span style="background-color: orange;"> 
			<c:choose>
				<c:when test="${(row.rate >= 1) && (row.rate < 2) }">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.jpg" width="15px" height="15px">
				</c:when>
				<c:when test="${(row.rate >= 2) && (row.rate < 3) }">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
				</c:when>
				<c:when test="${(row.rate >= 3) && (row.rate < 4) }">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
				</c:when>
				<c:when test="${(row.rate >= 4) && (row.rate < 5) }">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star2.png" width="15px" height="15px">
				</c:when>
				<c:when test="${row.rate >= 5}">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
					<img src="${path}/images/icons/star1.png" width="15px" height="15px">
				</c:when>
			</c:choose>
			</span><br><br>
		Reviews <b>[ <span style="color: red;">${row.count }</span> ]</b>
		</b>
	<td style="border-left: dashed 2px black; padding-left: 20px; padding-right: 20px;"> 
		<b>${row.history }</b>
<tr>
	<td colspan="4"><hr style="height: 3px; background-color: black;">
</c:forEach>
<!-- 페이지 네비게이션 출력 -->
<tr>
	<td colspan="7" align="center">
	${map.pageList}
	</td>
</tr>
</table>
</body>
</html>